<!--
 * @Description: 
 * @Author: Leequik
 * @Date: 2024-02-06 16:56:48
 * @LastEditTime: 2025-06-07 12:21:16
 * @LastEditors: Leequik
-->
<template>
    
    <div class="bo">
        <div id="mute"></div>
        <div class="heading">
            <h1>Cruds</h1>
        </div>

        <crud-component 
            v-for="crud in cruds"
            v-bind="crud"
            :key="crud.id"
            @update="update"
            @delete="del"
        ></crud-component>
        <div class="mb-4">
            <el-button type="primary" @click="create()">Add</el-button>
        </div>      
    </div>
    
</template>

<script>
    function Crud({id,color,name}){
        this.id = id;
        this.color = color;
        this.name = name;
    }
    
    import CrudComponent from '../../components/CrudComponent.vue';
    export default {
        data(){
            return{
                cruds:[],
                mute:false
            }
        },
        
        methods:{
            create(){
                //
                this.mute = true;
                window.axios.get('/api/cruds/create').then(({ data })=>{
                    this.cruds.push(new Crud(data));
                    this.mute = false;
                })
            },
            async read(){
                this.mute = true;
              
                const { data } = await window.axios.get('/api/cruds');
                data.forEach(crud => this.cruds.push(new Crud(crud)));
                this.mute = false;
                /*
                window.axios.get('/api/cruds').then(({ data })=>{
                    console.log(data);
                   data.forEach(crud=>{
                       this.cruds.push(new Crud(crud));
                       this.mute = false;
                   });
                });
                 */

            },
            update(id,color){
                this.mute = true;
                window.axios.put(`/api/cruds/${id}`,{ color }).then(()=>{
                    this.cruds.find(crud =>crud.id === id).color = color;

                    this.mute = false;
                });
            },
            del(id){
                this.mute = true;
                window.axios.get(`/api/cruds/${id}`).then(()=>{
                    let index = this.cruds.findIndex(crud => crud.id === id);
                    this.cruds.splice(index,1);
                    this.mute = false;
                });
            },
        },
        
        
        watch:{
            mute(val) {
                document.getElementById('mute').className = val ? "on" : "";
             }
        },
        
        components:{
            CrudComponent
        },
        
        created(){
            this.read();
        },
        
    }
</script>
<style>
    .heading h1 {
        margin-bottom: 0;
    }
    .bo {
        margin:auto;
    }
    #mute{
        position:absolute;
    }
    #mute.on{
        opacity:0.7;
        z-index:1000;
        background:white;
        height:100%;
        width:100%;
    }
</style>